<template>
  <div id="realTime">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>路径1</span>
      </div>
      <el-table
        :data="servoData"
        style="width: 100%">
        <el-table-column
          v-for="head in servoHead"
          :key="head.prop"
          :prop="head.prop"
          :label="head.label"
          :width="head.width">
        </el-table-column>
      </el-table>
      <el-table
        :data="axisData"
        style="width: 100%">
        <el-table-column
          v-for="head in axisHead"
          :key="head.prop"
          :prop="head.prop"
          :label="head.label"
          :width="head.width">
        </el-table-column>
      </el-table>
      <el-row class="label-row">
        <el-col :span="12">
          <span class="key">进给：</span>
          <span class="val">30000.000 MM/MIN</span>
        </el-col>
        <el-col :span="12">
          <span class="key">进给倍率：</span>
          <span class="val">39%</span>
        </el-col>
      </el-row>
      <el-row class="label-row">
        <el-col :span="12">
          <span class="key">当前加工程序文件：</span>
          <span class="val">Test4</span>
        </el-col>
        <el-col :span="12">
          <span class="key">当前程序块：</span>
          <span class="val">N30 GZ</span>
        </el-col>
      </el-row>
      <el-row class="label-row">
        <el-col :span="24">
          <span class="key">当前刀位号：</span>
          <span class="val">未知</span>
        </el-col>
      </el-row>
    </el-card>

    <el-card class="box-card mt20">
      <div slot="header" class="clearfix">
        <span>路径2</span>
      </div>

      <el-table
        :data="servoData"
        style="width: 100%">
        <el-table-column
          v-for="head in servoHead"
          :key="head.prop"
          :prop="head.prop"
          :label="head.label"
          :width="head.width">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { servoData, axisData } from '@/assets/js/mock'
import { servoHead, axisHead } from '@/assets/js/tableHeads'
export default {
  name:'realTime',
  data () {
    return {
      servoData,
      servoHead,
      axisData,
      axisHead
    }
  },
  methods: {
    
  },
  created() {
    
  }

}
</script>

<style lang="less">
.label-row {
  min-height: 20px;
  margin-top: 20px;
}
</style>